<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/cart.css" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 引入Vue -->
<script src="js/vue.min.js"></script>
<!-- 引入axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="js/damai.js"></script>
<script src="js/top.js"></script>
<script type="text/javascript" src="js/common.js"></script>

</head>
<body>
	<div class="container header">

		<div class="span5">
			<div class="logo">
				<a href="index.html"> <img
					src="image/r___________renleipic_01/logo.png" alt="依依不舍" />
				</a>
			</div>
		</div>
		<div class="span9">
			<div class="headerAd">
				<img src="image/header.jpg" width="320" height="50" alt="正品保障"
					title="正品保障" />
			</div>
		</div>
		<div class="span10 last">

			<top></top>

			<div class="cart">
				<a href="cart.html">购物车</a>
			</div>
			<div class="phone">
				客服热线: <strong>13234390126</strong>
			</div>
		</div>
		
	<category></category>

	</div>
	
	<script type="text/javascript">
		new Vue({
			el : ".header"
		})
		</script>
	
	<div class="container cart" id="cart">
		<div class="span24">


			<div class="step step1">购物车列表</div>
			<table>
				<tbody>
					<tr v-for="c in carts">
							<td width="60">
								<img :src="c.image">
							</td>
							<td>
								<a target="_blank">{{c.pname}}</a>
							</td>
							<td>
								￥{{c.shop_price}}
							</td>
							<td class="quantity" width="60">
								{{c.count}}
							</td>
							<td width="140">
								<span class="subtotal">￥{{c.shop_price*c.count}}</span>
							</td>
							<td>
								<a href="cart.html?pid=1" class="delete">删除</a>
							</td>
						</tr>

				</tbody>
			</table>
			<dl id="giftItems" class="hidden" style="display: none;">
			</dl>
			<div class="total">
				<em id="promotion"></em> <em> 登录后确认是否享有优惠 </em> 赠送积分: <em
					id="effectivePoint">11017.0</em> 商品金额: <strong id="effectivePrice">11017.0</strong>
			</div>
			<div>
				<p>
					收货地址：<input name="order.addr" type="text" value="天子脚下" style="width:350px" />
						<br />
					收货人&nbsp;&nbsp;&nbsp;：<input name="order.name" type="text" value="Song" style="width:150px" />
						<br /> 
					联系方式：<input name="order.phone" type="text" value="13283718600" style="width:150px" />

				</p>
			
			</div>
			
			<div class="bottom">
				
			
				<a href="cart.html" id="clear" class="clear">清空购物车</a> <a
					href="pay.html" id="submit" class="submit" @click.prevent="commit">提交订单</a>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		var v1 = new Vue({
			el : "#cart",
			data :{
				carts : [],
				count:1,
				addr: "",
				phone: "",
				name: ""
				
			},
			created(){
				axios.get("qcart.s").then(res=>{
					this.carts = res.data;
				})
			},
			methods : {
				commit(){
					let url = "order/commit.s";
					/*
						URLSearchParams 不是 map 集合
					*/
					let param = new URLSearchParams();
					param.append("name",this.name);
					param.append("phone",this.phone);
					param.append("addr",this.addr);
					
					for( let c of this.carts){
						// 添加相同的参数不会覆盖之间的参数, 相同的参数会构成 数组型参数
						param.append("count", c.count);
						param.append("pid", c.pid);
					}
					
					axios.post(url, param).then(res=>{
						if(res.data.code==0){
							alert(res.data.msg);
						} else {
							location.href = "olist.html"
						}
					})
				}
			}
		})
		
	
	</script>
	
	
	
	
	
	
	
	
	<div class="container footer">
		<div class="span24">
			<div class="footerAd">
				<img src="image/footer.jpg" width="950" height="52" alt="我们的优势"
					title="我们的优势">
			</div>
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li><a>关于我们</a> |</li>
				<li><a>联系我们</a> |</li>
				<li><a>招贤纳士</a> |</li>
				<li><a>法律声明</a> |</li>
				<li><a>友情链接</a> |</li>
				<li><a target="_blank">支付方式</a> |</li>
				<li><a target="_blank">配送方式</a> |</li>
				<li><a>服务声明</a> |</li>
				<li><a>广告声明</a></li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright © 2005-2013 Mango商城 版权所有</div>
		</div>
	</div>
</body>
</html>